//  this library.
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:flutter_svg/flutter_svg.dart';
import 'package:hktk_app/model/package/package_model.dart';
import 'package:hktk_app/util/buy_ios_util.dart';
import 'package:hktk_app/util/font_util.dart';
import 'package:hktk_app/util/view_util.dart';
import 'package:hktk_app/widget/package/package_back_widget.dart';

/// 购买页面卡片组件
class PackageCardWidget extends StatelessWidget {
  /// 卡片相关数据
  final PackageModel package;

  /// 对应下标
  final int index;

  /// 修改父组件状态的方法
  final ValueChanged<int>? onChange;

  /// 是否是购买
  final bool isBuy;

  /// 是否隐藏支付方式（微信/支付宝）,true：隐藏，false：不隐藏
  final bool payHide;

  const PackageCardWidget({
    super.key,
    required this.package,
    required this.index,
    required this.payHide,
    this.onChange,
    this.isBuy = true,
  });

  @override
  Widget build(BuildContext context) {

    return SizedBox(
      width: 1.sw-60,
      height: 200,
      child: Stack(
        children: [
          _background(),
          _recommendation(),
          _content(),
        ],
      ),
    );
  }

  /// 显示背景方法
  _background() {
    int i = index % 4;
    if (i == 0) {
      return const PackageBackWidget.blue();
    } else if (i == 1) {
      return const PackageBackWidget.green();
    } else if (i == 2) {
      return const PackageBackWidget.darkBlue();
    } else if (i == 3) {
      return const PackageBackWidget.orange();
    }
  }

  /// 显示内容
  _content() {
    return Container(
      padding: EdgeInsets.fromLTRB(22, 37, 30, 30),
      child: Row(
        // -52-60
        children: [
          SizedBox(
            width: 110,
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                _label(),
                hiSpace(height: 27),
                _price(),
              ],
            ),
          ),
          hiSpace(width: 30),
          Container(
            width: 1.sw-60-52-110-30  -2,
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                _title(),
                hiSpace(height: 10),
                _tabs(),
                hiSpace(height: isBuy ? 30 : 50),
                isBuy ? _bottomBuy() : _bottomNoBuy(),
              ],
            ),
          ),

        ],
      ),
    );
  }

  /// 显示相关标签
  _label() {
    List<Widget> list = [];
    List<String> list2 = package.tagTypeList ?? ["question"];
    for (int i = 0; i < list2.length; i++) {
      if (list2[i] == "question") {
        list.add(_labelIcon("images/package/package_card_t.svg"));
      } else if (list2[i] == "material") {
        list.add(_labelIcon("images/package/package_card_z.svg"));
      } else if (list2[i] == "video") {
        list.add(_labelIcon("images/package/package_card_k.svg"));
      }
      // 间距
      if (i != list2.length - 1) {
        list.add(hiSpace(width: 4));
        list.add(_labelIcon(
          "images/package/package_card_add.svg",
          isAdd: true,
        ));
        list.add(hiSpace(width: 4));
      }
    }

    return Row(
      children: list,
    );
  }

  /// 显示标签的svg
  _labelIcon(String url, {bool isAdd = false}) {
    return SvgPicture.asset(
      url,
      width: isAdd ? 12 : 24,
      height: isAdd ? 12 : 24,
    );
  }

  /// 显示价格
  _price() {
    int p = package.discountPrice ?? 0;
    double p1 = p / 100;
    if (payHide) {
      p1 = BuyIOSUtil.getIosPrice(p1);
    }
    return Container(
      height: 78,
      margin: EdgeInsets.only(left: 10),
      child: FittedBox(
        child: Text(
          p1.toStringAsFixed(2),
          style: FontUtil.fontOrange6(48),
        ),
      ),
    );
  }

  /// 显示标题
  _title() {
    return Container(
      // width: 1.sw-60-52-110-30  -2,
      margin: EdgeInsets.only(top: 3),
      child: Text(
        package.name ?? "",
        maxLines: 1,
        overflow: TextOverflow.ellipsis,
        style: FontUtil.fontWhile1(18, fontWeight: FontWeight.w500),
      ),
    );
  }

  /// 显示相关tab
  _tabs() {
    List<String> tabs = package.tagNameList ?? [];
    List<Widget> list = [];
    for (int i = 0; i < tabs.length; i++) {
      list.add(_tabItem(tabs[i]));
      // 间距
      if (i != tabs.length - 1) {
        list.add(hiSpace(width: 8));
      }
    }
    return Wrap(
      runSpacing:5,
      crossAxisAlignment: WrapCrossAlignment.start,
      children: list,
    );
    // return Row(
    //   children: list,
    // );
  }

  /// 显示一个tab
  Widget _tabItem(String tab) {
    return Container(

      padding: EdgeInsets.fromLTRB(8, 2, 8, 2),
      decoration: BoxDecoration(
          borderRadius: BorderRadius.circular(4),
          border: Border.all(
            color: _tabItemColor(),
            width: 1,
          )),
      child: Text(
          tab,
          style: FontUtil.fontWhile1(12),
        ),

    );
  }

  /// 显示tab边框的颜色
  _tabItemColor() {
    int i = index % 4;
    if (i == 0) {
      return colorBlue15;
    } else if (i == 1) {
      return colorGreen7;
    } else if (i == 2) {
      return colorBlue16;
    } else if (i == 3) {
      return colorOrange8;
    }
  }

  /// 底部购买组件
  _bottomBuy() {
    return Container(
      margin: EdgeInsets.only(left: 216),
      child: GestureDetector(
        onTap: () {
          onChange!(index);
        },
        child: Container(
          width: 164,
          height: 64,
          padding: EdgeInsets.symmetric(horizontal: 24, vertical: 12),
          decoration: BoxDecoration(
              color: _btnColor(), borderRadius: BorderRadius.circular(32)),
          child: Text(
            "立即购买",
            style: FontUtil.fontWhile1(28, fontWeight: FontWeight.w500),
          ),
        ),
      ),
    );
  }

  /// 卡片按钮颜色
  _btnColor() {
    int i = index % 4;
    if (i == 0) {
      return colorBlue17;
    } else if (i == 1) {
      return colorGreen8;
    } else if (i == 2) {
      return colorBlue1;
    } else if (i == 3) {
      return colorOrange9;
    }
  }

  /// 底部不购买组件
  _bottomNoBuy() {
    return Container();
    // return Row(
    //   children: [
    //     SvgPicture.asset(
    //       "images/package/package_card_fire.svg",
    //       width: 28,
    //       height: 30,
    //       color: _tabItemColor(),
    //     ),
    //     hiSpace(width: px10),
    //     Text(
    //       "已有 0 人购买过",
    //       style: FontUtil.fontWhile1(22),
    //     )
    //   ],
    // );
  }

  /// 显示推荐
  _recommendation() {
    if (package.recommend == true) {
      int i = index % 4;
      String svgUrl = "images/package/package_card_tj.svg";
      if (i == 0) {
        svgUrl = "images/package/package_card_tj3.svg";
      } else if (i == 1) {
        svgUrl = "images/package/package_card_tj5.svg";
      } else if (i == 2) {
        svgUrl = "images/package/package_card_tj4.svg";
      } else if (i == 3) {
        svgUrl = "images/package/package_card_tj.svg";
      }
      return _recommendItem(svgUrl: svgUrl);
    } else {
      return Container();
    }
  }

  /// 推荐1
  _recommendItem({required String svgUrl}) {
    return Container(
      width: 1.sw-60,
      padding: EdgeInsets.only(top: 3, right: 3),
      child: Row(
        mainAxisAlignment: MainAxisAlignment.end,
        children: [
          ClipRRect(
            borderRadius: BorderRadius.circular(24),
            child: SvgPicture.asset(
              svgUrl,
              width: 60,
              height: 60,
            ),
          )
        ],
      ),
    );
  }
}
